import React, { Component } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Modal, Row, Col, Input, Button, Table,
} from 'antd';
import { FormComponentProps } from '@ant-design/compatible/es/form';
import { courierInfoData, courierInfoParams } from '../data';

interface TableListProps extends FormComponentProps {
  dispatch?: Dispatch;
  courierInfo?: courierInfoData;
  AddVisible: boolean;
  CabinetId: number;
  ChangeAdd: (addVisible: boolean) => void;
  location?: { query: any };
}

interface TableListState {
  searchValues: courierInfoParams;
}

@connect(({
  bookingCourierList: { courierInfo },
}: any) => ({ courierInfo }))

class BookingCourierListElem extends Component<TableListProps, TableListState> {
  state = {
    searchValues: {
      phone: '',
      pageIndex: 1,
      pageSize: 10,
    },
  }

  columns = [
    { title: 'ID', dataIndex: 'id' },
    { title: '姓名', dataIndex: 'name' },
    { title: '手机', dataIndex: 'phone' },
    {
      title: '操作',
      render: (val: any, row: any) => (
        <span
          className="operLink"
          onClick={() => this.handleSelect(row.id)}
        >选择
        </span>
      ),
    },
  ]

  componentDidUpdate() {
    const { AddVisible, courierInfo }: any = this.props;
    if (AddVisible && !courierInfo.count) {
      const { searchValues } = this.state;
      this.fetchAction('fetchOutUserList', searchValues);
    }
  }

  handleSelect = (id: number) => {
    const { CabinetId }: any = this.props;
    const params = {
      cabinetId: CabinetId,
      courierUid: id,
    };
    this.fetchAction('addOutUser', params);
  }

  handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    const { form: { validateFields } } = this.props;
    validateFields((errors, values) => {
      if (!errors) {
        const { searchValues } = this.state;
        const params = {
          ...searchValues,
          ...values,
          pageIndex: 1,
          pageSize: 10,
        };
        this.setState({
          searchValues: params,
        }, () => this.fetchAction('fetchOutUserList', params));
      }
    });
  }

  handleCancel = () => {
    const { ChangeAdd, form: { resetFields } } = this.props;
    ChangeAdd(false);
    resetFields();
    const params = { phone: '', pageIndex: 1, pageSize: 10 };
    this.setState({
      searchValues: params,
    }, () => this.fetchAction('fetchOutUserList', params));
  }

  onSelectChange = (pageIndex: number, pageSize: number) => {
    const { searchValues } = this.state;
    const params = {
      ...searchValues,
      pageIndex,
      pageSize,
    };
    this.setState({
      searchValues: params,
    }, () => this.fetchAction('fetchOutUserList', params));
  }

  fetchAction = (typeName: string, payload: any = {}) => {
    const { dispatch }: any = this.props;
    const type = `bookingCourierList/${typeName}`;
    dispatch({ type, payload });
  }

  render() {
    const { searchValues: { pageIndex, pageSize } } = this.state;

    const {
      AddVisible,
      courierInfo,
      form: { getFieldDecorator },
    }: any = this.props;

    const dataSource = courierInfo ? courierInfo.list : [];
    const pagination: object = {
      total: courierInfo ? courierInfo.count : 0,
      current: pageIndex,
      pageSize,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '50', '100'],
      showTotal: () => `共${courierInfo.count || 0}条数据`,
      onChange: this.onSelectChange,
      onShowSizeChange: this.onSelectChange,
    };

    return (
      <Modal
        title="添加可预约快递员"
        visible={AddVisible}
        width={800}
        footer={null}
        onCancel={this.handleCancel}
      >
        <Form className="tableListForm marginB20" onSubmit={this.handleSearch}>
          <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
            <Col md={8} sm={24}>
              <Form.Item label="手机号" colon={false}>
                {getFieldDecorator('phone')(
                  <Input allowClear type="number" placeholder="请输入" />,
                )}
              </Form.Item>
            </Col>
            <Col md={8} sm={24} className="paddingL20">
              <Button type="primary" htmlType="submit" className="smallButton">查询</Button>
            </Col>
          </Row>
        </Form>
        <Table
          rowKey="id"
          className="statementTable"
          columns={this.columns}
          dataSource={dataSource}
          pagination={pagination}
        />
      </Modal>
    );
  }
}

export default Form.create<TableListProps>()(BookingCourierListElem);
